<!DOCTYPE html>
<!-- Tpv zhongxiang.huang 20190111,add -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="edge"/>
    <title>插件安装引导</title>
    <link rel="shortcut icon" type="image/png" th:href="@{/img/favicon.ico}" />
    <link rel="stylesheet" th:href="@{/css/app.css(t=${version})}" type="text/css">
    <!-- animate -->
    <link rel="stylesheet" th:href="@{/css/animate/animate.min.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/tpv/meeting.css(t=${version})}">
    <link rel="stylesheet" th:href="@{/css/tpv/style.css(t=${version})}">
    <link rel="stylesheet" th:href="@{/css/tpv/browser.css(t=${version})}">

    <script th:src="@{/js/tether/tether.min.js}"></script>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/jquery.i18n/jquery.i18n.properties.js}"></script>
    <script th:src="@{/js/jquery.i18n/languages.config.js}"></script>
    <script th:src="@{/js/bootstrap/bootstrap.min.js}"></script>
    <script th:src="@{/js/bootstrap-notify/bootstrap-notify.min.js}"></script>
    
</head>
<body>
	<div >
		<div style="background-color: #337ab7; padding: 12px 20px">
			<img style="height: 36px;margin-left: 20px" th:src="@{/img/tpv/browser/vc_logo_loading.png}">
			<span style="color: white;font-size: 24px;vertical-align: middle;padding-left: 16px">TPV Cloud VC</span>
		</div>
		<div style="width: 1300px;margin: 0 auto;">
		 	
			<div style="font-size:24px;color:#FF5A00;margin-top: 20px;margin-left: 40px">
			    <img style="height: 24px;" th:src="@{/img/tpv/browser/warning_icon.png}"><span style="margin-left: 8px">请在安装插件后加入会议:</span>
			</div>
			
			<div style="text-align:center;margin-top: 40px">
				<div style="display:inline-block;margin-left: 40px;margin-right: 20px;vertical-align: middle;">
					<a class="btn tpv-btn-primary" style="padding: 10px;width: 120px;color: white;" href="https://chrome.google.com/webstore/detail/tpv-aoc-conf-service-exte/aafbafcjdjikkhdomcgmgpgehfnmokel" target="view_window">在线安装</a><br>
					<span style="font-size: 14px;display:block; margin-top: 16px">通过浏览器应用商店安装插件</span>
				</div>
				<div style="display:inline-block;margin-left: 40px;vertical-align: middle;">
					<a class="btn tpv-btn-primary" th:href="${detail.appPluginDownUrl}" style="padding: 10px;width: 120px;color: white;">下载插件</a><br>
					<span style="font-size: 14px;display:block; margin-top: 16px">下载插件后手动安装</span>
				</div>
				<div style="display:inline-block;margin-left: 20px">
					<a th:href="@{/appupdate/installInstruction}" style="font-size: 16px;color: #337ab7;text-decoration: underline;" target="view_window">安装说明</a>
				</div>
			</div>
			
			<div style="text-align:center;font-size:24px;margin-top: 40px;color: black;'">
			    <b>安装后重新启动浏览器，并将连接复制到地址栏，已重新加入会议</b>
			</div>
			
			<div style="text-align:center;font-size:18px;margin-top: 60px">
				<div style="display:inline-block;vertical-align: middle;">
					<span style="margin-right: 60px">当前兼容的浏览器有：</span>
				</div>
				<div style="display:inline-block;margin-left: 60px;margin-right: 60px;vertical-align: middle;">
					<div>
						<img style="width: 80px;height: 80px" th:src="@{/img/tpv/browser/chrome.png}">
					</div>
					<span style="margin: 10px;font-size: 16px;color: #337ab7">Chrome</span><br>
					<span style="font-size: 14px;">适用版本：Chrome 52+</span>
				</div>
				<div style="display:inline-block;margin-left: 60px;margin-right: 320px;vertical-align: middle;">
					<div>
						<img style="width: 80px;height: 80px" th:src="@{/img/tpv/browser/firefox.png}" />
					</div>
					<span style="margin: 10px;font-size: 16px;color: #337ab7">Firefox</span><br>
				   	<span style="font-size: 14px;">适用版本：Firefox 47+</span>
				</div>
			</div>
					
			<div style="font-size:18px;margin-left:40px; margin-top: 80px;margin-bottom: 20px;">
			    <span >您也可以通过其他方式加入会议：</span>
			</div>
			<div id="tab">  
			    <div id="tab-header">  
			        <ul>
			        	<li class="selected">
			        		<div>
			        			<div class="tab-img tab-img-android selected" ></div>
			        			<div style="margin-top: 10px;margin-bottom: 12px">Android</div>
			        			<div class="tab-line tab-line-left selected" ></div>
			        		</div>
			        	</li>
			        	<li>
			        		<div>
			        			<div class="tab-img tab-img-pad" ></div>
			        			<div style="margin-top: 10px;margin-bottom: 12px">iPhone/iPad</div>
			        			<div class="tab-line tab-line-middle" ></div>
			        		</div>
			        	</li> 
			        	<li>
			        		<div>
			        			<div class="tab-img tab-img-tv" ></div>
			        			<div style="margin-top: 10px;margin-bottom: 12px">Android TV</div>
			        			<div class="tab-line tab-line-right" ></div>
			        		</div>
			        	</li>
			    	</ul>  
			    </div>
			    <div id="tab-content" style="margin-top: 100px"> 
			     
			        <div class="dom" style="display: block;">  
			        	<div style="width: 50%;height:400px;display: inline-block;vertical-align: middle;">
			        		<span style="color: #134867;font-size: 24px;">1.安装客户端应用</span>
			        		
							<div style="margin-left: 10px;margin-top: 40px;margin-bottom: 10px">
								<span style="font-size: 18px">扫码下载应用:</span>
							</div>
							<div style="text-align: center;display: inline-block;vertical-align: middle;margin-left: 120px">
								<img id="meeting-detail-qrcode" style="width: 160px;height: 160px" data-th-src="@{'data:img/png;base64,'+${detail.appAndroidDownCode}}"/><br> 
				        		<span style="font-size: 14px">安卓手机/平板客户端 </span>
			        		</div>
			        		<div style="display: inline-block;vertical-align: middle;margin-left: 20px;;">
			        			<span style="margin-left: 10px;margin-right: 40px;font-size: 16px">or</span>
			        			 <a th:href="${detail.appAndroidDownUrl}" class="btn tpv-btn-primary" style="width: 120px;padding: 10px" >下载你应用</a> 
			        		</div>
			        	</div>
			        	<HR style="display: inline-block;vertical-align: middle;height: 360px; width: 1px;margin-right: 40px" align="center" color="#B8BFD8" SIZE="1">
			        	<div style="width: 45%;height:400px; display: inline-block;vertical-align: middle;">
			        		<span style="color: #134867;font-size: 24px;">2.运行客户端，扫描会议号码 或 扫描二维码加入会议</span>
				            <div style="height:400px; display: inline-block;vertical-align: middle;padding-top:40px;font-size: 18px">
					            <div><span >[[#{meeting.id}]]：</span><span data-th-text="${detail.meetingId}"></span></div>
					            <div style="margin-top: 30px"><span >[[#{meeting.password}]]：</span><span data-th-text="${detail.password}"></span></div>
				            </div>
				            <div style="height:400px;display: inline-block;vertical-align: middle;padding-top:40px;margin-left: 80px;font-size: 18px">
				            	<span>扫码加入:</span><br>
				            	<img id="meeting-detail-qrcode" style="width: 160px;height: 160px;margin-left: 80px;margin-top: 10px" data-th-src="@{'data:img/png;base64,'+${detail.qrcode}}"/><br>
				            </div>
			        	</div>
		            </div>
		            
		            <div class="dom">  
			            <div style="width: 50%;height:400px;display: inline-block;vertical-align: middle;">
			        		<span style="color: #134867;font-size: 24px;">1.安装客户端应用</span>
			        		
							<!-- <div style="margin-left: 10px;margin-top: 40px;margin-bottom: 10px">
								<span style="font-size: 18px">扫码下载应用:</span>
							</div>
							<div style="text-align: center;display: inline-block;vertical-align: middle;margin-left: 120px">
								<img id="meeting-detail-qrcode" style="width: 160px;height: 160px" data-th-src="@{'data:img/png;base64,'+${detail.appPDDownCode}}"/><br>
				        		<span style="font-size: 14px">安卓TV客户端 </span>
			        		</div>
			        		<div style="display: inline-block;vertical-align: middle;margin-left: 20px;;">
			        			<span style="margin-left: 10px;margin-right: 40px;font-size: 16px">or</span>
			        			<a th:href="${detail.appPDDownUrl}" class="btn tpv-btn-primary" style="width: 120px;padding: 10px" >下载你应用</a>
			        		</div> -->
			        	</div>
			        	<HR style="display: inline-block;vertical-align: middle;height: 360px; width: 1px;margin-right: 40px" align="center" color="#B8BFD8" SIZE="1">
			        	<div style="width: 45%;height:400px; display: inline-block;vertical-align: middle;">
			        		<span style="color: #134867;font-size: 24px;">2.运行客户端，扫描会议号码 或 扫描二维码加入会议</span>
				            <div style="height:400px; display: inline-block;vertical-align: middle;padding-top:40px;font-size: 18px">
					            <div><span >[[#{meeting.id}]]：</span><span data-th-text="${detail.meetingId}"></span></div>
					            <div style="margin-top: 30px"><span >[[#{meeting.password}]]：</span><span data-th-text="${detail.password}"></span></div>
				            </div>
				            <div style="height:400px;display: inline-block;vertical-align: middle;padding-top:40px;margin-left: 80px;font-size: 18px">
				            	<span>扫码加入:</span><br>
				            	<img id="meeting-detail-qrcode" style="width: 160px;height: 160px;margin-left: 80px;margin-top: 10px" data-th-src="@{'data:img/png;base64,'+${detail.qrcode}}"/><br>
				            </div>
			        	</div>
			        </div>  
			        
			        <div class="dom">  
			        	<div style="width: 50%;height:400px;display: inline-block;vertical-align: middle;">
			        		<span style="color: #134867;font-size: 24px;">1.安装客户端应用</span>
			        		
							<div style="margin-left: 10px;margin-top: 40px;margin-bottom: 10px">
								<span style="font-size: 18px">扫码下载应用:</span>
							</div>
							<div style="text-align: center;display: inline-block;vertical-align: middle;margin-left: 120px">
								<img id="meeting-detail-qrcode" style="width: 160px;height: 160px" data-th-src="@{'data:img/png;base64,'+${detail.appPDDownCode}}"/><br> 
				        		<span style="font-size: 14px">安卓TV客户端 </span>
			        		</div>
			        		<div style="display: inline-block;vertical-align: middle;margin-left: 20px;;">
			        			<span style="margin-left: 10px;margin-right: 40px;font-size: 16px">or</span>
			        			<a th:href="${detail.appPDDownUrl}" class="btn tpv-btn-primary" style="width: 120px;padding: 10px" >下载你应用</a> 
			        		</div>
			        	</div>
			        	<HR style="display: inline-block;vertical-align: middle;height: 360px; width: 1px;margin-right: 40px" align="center" color="#B8BFD8" SIZE="1">
			        	<div style="width: 45%;height:400px; display: inline-block;vertical-align: middle;">
			        		<span style="color: #134867;font-size: 24px;">2.运行客户端，扫描会议号码 或 扫描二维码加入会议</span>
				            <div style="height:400px; display: inline-block;vertical-align: middle;padding-top:40px;font-size: 18px">
					            <div><span >[[#{meeting.id}]]：</span><span data-th-text="${detail.meetingId}"></span></div>
					            <div style="margin-top: 30px"><span >[[#{meeting.password}]]：</span><span data-th-text="${detail.password}"></span></div>
				            </div>
				            <div style="height:400px;display: inline-block;vertical-align: middle;padding-top:40px;margin-left: 80px;font-size: 18px">
				            	<span>扫码加入:</span><br>
				            	<img id="meeting-detail-qrcode" style="width: 160px;height: 160px;margin-left: 80px;margin-top: 10px" data-th-src="@{'data:img/png;base64,'+${detail.qrcode}}"/><br>
				            </div>
			        	</div>
			        </div>  
			    </div>
		    </div>  
		</div> 
	</div>    
</body>
<script type="text/javascript">
//== 值比较  === 类型比较 $(id) ---->  document.getElementById(id)  
function $(id){  
    return typeof id === 'string' ? document.getElementById(id):id;  
}  
  
// 当页面加载完毕  
window.onload = function(){  
    // 拿到所有的标题(li标签) 和 标题对应的内容(div)  
    var titles = $('tab-header').getElementsByTagName('li');  
    var divs = $('tab-content').getElementsByClassName('dom');  
    var imgs = $('tab-header').getElementsByClassName('tab-img');  
    var lines = $('tab-header').getElementsByClassName('tab-line');  
    // 判断  
    if(titles.length != divs.length) return;  
    // 遍历  
    for(var i=0; i<titles.length; i++){  
        // 取出li标签  
        var li = titles[i];  
        li.id = i;  
//        console.log(li);  
        // 监听鼠标的移动  
        li.onmousemove = function(){  
            for(var j=0; j<titles.length; j++){  
                titles[j].className = '';  
                divs[j].style.display = 'none';  
                imgs[j].classList.remove('selected');
                lines[j].classList.remove('selected');
            }  
            this.className = 'selected';  
            divs[this.id].style.display = 'block';  
            imgs[this.id].classList.add('selected');
            lines[this.id].classList.add('selected');
        }  
    }  
  
} 
</script>
</html>